<template>
  <div class="game-box">
    <!-- 导航栏 -->
    <van-nav-bar
      title="比赛统计"
      left-text="返回"
      left-arrow
      @click-left="handleToBack"
      fixed
      placeholder
    />
    <div class="u-font-14">
      <van-sticky :offset-top="46">
        <van-row class="u-p-t-10 u-p-b-10" style="background-color: #ffffff;">
          <van-col span="3">英雄</van-col>
          <van-col span="6">结果</van-col>
          <van-col span="7">模式</van-col>
          <van-col span="4">时间</van-col>
          <van-col span="4">K/D/A</van-col>
        </van-row>
      </van-sticky>
      <van-list
        v-model:loading="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <van-row
          class="u-m-t-6 u-p-b-6 u-border-bottom"
          v-for="item in matchList"
          :key="item.match_id"
          align="center"
          justify="space-between"
          @click="handleToMatch(item.match_id)"
        >
          <van-col span="3">
            <van-image
              lazy-load
              width="32"
              height="32"
              fit="cover"
              position="left"
              round
              :src="getHeroAvatar(item.hero_id)"
            />
          </van-col>
          <van-col span="6">
            <div class="u-flex u-flex-col u-col-center">
              <div
                class="u-flex u-m-b-4"
              >{{ isRadiant(item.player_slot) ? '天辉' : '夜魇' }}/{{ getPartSize(item.party_size) }}</div>
              <van-tag type="success" v-if="isWin(item.player_slot, item.radiant_win)">胜利</van-tag>
              <van-tag type="danger" v-else>失败</van-tag>
            </div>
          </van-col>
          <van-col span="7">
            <div class="u-flex u-flex-col u-col-center u-line-1">
              <div class="u-m-b-4">
                <span
                  :class="item.lobby_type === 7 ? 'u-type-warning' : 'u-type-primary'"
                >{{ getLobbyType(item.lobby_type) }}</span>
                <span v-if="item.leaver_status !== 0">({{ getSkillLevel(item.leaver_status) }})</span>
              </div>
              <div class="u-type-info u-font-12">{{ getGameMode(item.game_mode) }}</div>
            </div>
          </van-col>
          <van-col span="4">
            <div class="u-flex u-flex-col u-col-center">
              <div class="u-m-b-4">{{ formatGameDuration(item.duration) }}</div>
              <div class="u-type-info u-font-12">{{ formatStartTime(item.start_time) }}</div>
            </div>
          </van-col>
          <van-col span="4">
            <div class="u-flex u-flex-col u-col-center">
              <div
                class="u-m-b-4"
              >{{ ((item.kills + item.assists) / (item.deaths || 1)).toFixed(1) }}</div>
              <div
                class="u-type-info u-font-12"
              >{{ item.kills }}/{{ item.deaths }}/{{ item.assists }}</div>
            </div>
          </van-col>
        </van-row>
      </van-list>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getPlayerMatches } from "@/api/player.js";
import {
  isWin,
  getGameMode,
  getPartSize,
  getLobbyType,
  formatGameDuration,
  isRadiant,
  formatStartTime,
  getSkillLevel,
  getHeroAvatar,
} from "@/utils/dotaHelper.js";
const route = useRoute();
const router = useRouter();
const query = {
  limit: 20,
  offset: 0,
};
const state = reactive({
  loading: false,
  finished: false,
  error: false,
});
const matchList = ref([])
const onLoad = () => {
  getPlayerMatches(route.params.account_id, {
    limit: query.limit,
    offset: query.offset,
  })
    .then((res) => {
      if (res.length) {
        matchList.value.push(...res);
        query.offset = query.offset + query.limit;
        state.loading = false;
        console.log(matchList.value)
      } else {
        state.finished = true;
      }
    })
    .catch(() => {
      state.error = true;
    });
};
const handleToBack = () => {
  router.back();
};
const handleToMatch = (match_id) => {
  router.push({
    name: "Match", params: {
      match_id
    }
  });
};
</script>
<style lang="scss" scoped>
.game-box {
}
</style>
